<template>
    <view class="message" :style="{ marginTop: top + 'rpx'}">
        <view class="message-content">
            <view class="user-avatar">
                <u-avatar :src="message.hostAvatar" size="80" v-if="(isSelf && user.isPay) || flag"></u-avatar>
                <u-avatar :src="getImgUrl(`${random}.jpg`)" size="80" @click.stop="$emit('pay')" v-else></u-avatar>
            </view>
            <view class="content">{{ message.content }}</view>
            <view class="status" v-if="message.replyList && message.replyList.length > 0 && !isSelf">已回复</view>
            <view
                class="reply"
                @click.stop="reply"
                v-if="isSelf && (!message.replyList || message.replyList.length === 0)"
            ><img :src="getImgUrl('reply.svg')"/></view>
        </view>
        <view class="repeat-content" v-if="message.replyList && message.replyList.length > 0">
            <view class="user-avatar self">
                <u-avatar :src="user.avatar" size="80" v-if="user.avatar"></u-avatar>
            </view>
            <view class="content">{{ message.replyList[0].content }}</view>
        </view>
        <view class="close-icon" v-if="isSelf" @click.stop="$emit('clickClose')">
            <!-- <u-icon name="close-circle-fill" color="#F79090" size="50"></u-icon> -->
            <u-icon name="close" color="#ffffff" size="26"></u-icon>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        isSelf: {
            // 是否是发起者本人
            type: Boolean,
            default: true,
        },
        message: {
            type: Object,
            default: () => {},
        },
        user: {
            type: Object,
            default: () => {},
        },
        top: {
            type: Number,
            default: 0
        },
        flag: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        random() {
            return Math.round(Math.random() * 4) + 1;
        },
    },
    methods: {
        reply() {
            if (this.isSelf && (!this.message.replyList || this.message.replyList.length === 0)) {
                this.$emit('clickReply');
            }
        },
    },
};
</script>

<style scoped lang="scss">
.message {
    position: relative;
    color: #333333;
    font-size: 36rpx;
    margin: 0 32rpx 36rpx 32rpx;
}
.message-content {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 26rpx;
    padding: 24rpx;
}
.user-avatar {
    height: 80rpx;
    width: 80rpx;
    /* background-color: #000000; */
    border-radius: 50%;
    margin-right: 40rpx;

    &.self {
        margin-right: 28rpx;
    }
}
.content {
    width: calc(100% - 140rpx);
    word-wrap: break-word;
}
.status {
    color: #999999;
    font-size: 22rpx;
    width: 106rpx;
    margin-left: 30rpx;
}
.repeat-content {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 44rpx 30rpx 24rpx;
    border-radius: 0 0 26rpx 26rpx;
    margin-top: -20rpx;
}
.repeat-content .content {
    display: flex;
    align-items: center;
}
.repeat-content .content::before {
    content: '回复';
    background-color: #a677ff;
    color: #ffffff;
    line-height: 32rpx;
    width: 64rpx;
    text-align: center;
    border-radius: 4rpx;
    font-size: 24rpx;
    margin-right: 26rpx;
}
.reply img {
    width: 42rpx;
    height: 36rpx;
    margin-right: 30rpx;
}
.close-icon {
    position: absolute;
    top: -12rpx;
    right: -10rpx;
    width: 50rpx;
    height: 50rpx;
    background: #F79090;
    border: 3rpx solid #D35C5C;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>
